<template> 
        <div>
  <!-- 面包屑 -->
  <bread-crumb :names="['首页','商品管理','参数列表']"></bread-crumb>
      <h2>此页面为开发人员测试页,您可不予理会</h2>
  <!-- 卡片 -->
  <el-card>
          <!-- 消息提示 -->
           <el-alert
    title="注意:只允许为第三级分类设置相关参数!"
    type="warning"
    :closable='false'
    show-icon>
  </el-alert>
  <!-- 选择商品分类 -->
  <el-row class="select-category">
          <el-col>
                  <span style="margin-right:10px;">选择商品分类:</span>
                  <!-- 级联选择器 -->
                   <el-cascader
    v-model="categoryId"
    :options="categoryList"
    :props="options"
    clearable
    @change='hanldCategoryId'
    ></el-cascader>
          </el-col>
  </el-row>
        <!-- tabs标签页 -->
        <!-- 商品id为空表明用户肯定没有选择三级分类,按钮禁用掉  向子组件传分类id参数-->
        <etabs :isDisabled='controlBtnDisabled' :cateId='categoryId'></etabs>
  </el-card>
        </div>
</template>

<script>
import BreadCrumb from 'common/BreadCrumb'
import{ getGoodsCate} from 'network/axios'
import Etabs from './goodsparamsChildren/Etabs'
export default {
        name:'GoodsParams',
        components:{BreadCrumb,Etabs},
        created(){
                getGoodsCate().then(res=>{
                       if(res.data.meta.status!=200){
                               this.$message.error('获取商品列表数据失败')
                       }else{
                               this.categoryList=res.data.data
                       }
                })
        },
        data(){
        return{
                // 动态或者静态参数列表
                categoryList:[],
                // 级联选择器的配置
                options:{
                        expandTrigger:'hover',
                        label:'cat_name',
                        value:'cat_id',
                        children:'children',
                        emitPath:false
                },
                // 参数id
                categoryId:0
        }
        },
                methods:{
                },
                computed:{
                        controlBtnDisabled(){
                                if(this.categoryId===0||this.categoryId===null)
                                return true
                                return false
                        }
                }
}
</script>

<style scoped>
                .select-category{
                        margin-top: 20px;
                }
</style>